<template>

	<view class="container">
		<!-- 页面头部 -->
	<!-- 	<view class="main-header"
			:style="{height:(statusBarHeight + titleBarHeight) + 'px',paddingTop: statusBarHeight + 'px'}">
			<image class="bg-image" src="/static/background/user-header4.jpg" mode="scaleToFill"></image>
				<u-icon @tap="goLastPage" style="color: white;" name="arrow-left"></u-icon>
				<view  @tap="goLastPage" class="title-text" :style="{height: titleBarHeight + 'px'}">课本选词出题</view>
		
		</view> -->
		<view class="searchBox">
			
			
			<view @click="setBaseInfo">{{BaseInfoStr}}
			</view>
			<u-icon v-if="isLogin" @click="setBaseInfo" style="color: black; margin-right: 20rpx;" name="arrow-down-fill"></u-icon>
				
			<view style="flex: 1; text-align: right;"><u-checkbox @change="courseAllChange"
					v-model="selectCourseAll">课文全选</u-checkbox></view>
			<view style="flex: 1; text-align: right;"><u-checkbox @change="unitAllChange"
					v-model="selectUnitAll">单元全选</u-checkbox></view>
		</view>
		<view class="u-wrap">
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
					<view class="u-tab-item" :class="[current==0 ? 'u-tab-item-active' : '']" data-current="0"
						@tap.stop="swichMenu(0)">
						<text class="u-col-1">按课文选词</text>
					</view>

					<view class="u-tab-item" :class="[current==1 ? 'u-tab-item-active' : '']" data-current="1"
						@tap.stop="swichMenu(1)">
						<text class="u-col-1">按单元选词</text>
					</view>


				</scroll-view>
				<block>
					<scroll-view scroll-y class="right-box" v-if="current==0">
						<view class="page-view">

							<uni-list>
								<uni-list-item v-for="(item,index) in courseList" :key="index">
									<template v-slot:body>
										<text class="slot-box slot-text">
											{{item.courseTitle + (item.courseName!=undefined && item.courseName!= "" ?`: ${item.courseName}`:'')}}</text>
									</template>
									<template v-slot:footer>
										<u-checkbox-group>
											<u-checkbox @change="courseChange" :name="item.courseCode" :key="index"
												v-model="item.checked"></u-checkbox>
										</u-checkbox-group>


									</template>
								</uni-list-item>
							</uni-list>

						</view>
					</scroll-view>

				</block>
				<block>
					<scroll-view scroll-y class="right-box" v-if="current==1">
						<view class="page-view">
							<uni-list>
								<uni-list-item v-for="(item,index) in unitList" :key="index">
									<!-- 	<template v-slot:header>
								<view class="slot-box">
									<image class="slot-image" src="/static/unit.png" style="width: 5rpx height: 5rpx;"></image>
								</view>
							</template> -->

									<template v-slot:body>
										<text class="slot-box slot-text">{{item.unitName}}</text>
									</template>
									<template v-slot:footer>
										<u-checkbox @change="unitChange" :name="item.unitCode"
											v-model="item.checked"></u-checkbox>
									</template>
								</uni-list-item>
							</uni-list>
						</view>
					</scroll-view>

				</block>
			</view>
		</view>
		<view
			style="width: auto; height: 300rpx; background-color: white; margin-top: 30rpx;margin-left: 10rpx; margin-right: 10rpx; ">
			<u-form>


				<u-form-item :label-position="labelPosition" label="出卷方式" label-width="150" prop="likeFruit">
					<u-radio-group style="display: inline-block;" v-model="wordQueryParams.wordType"
						:width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio v-for="(item, index) in wordTypeList" :key="index"
							:name="item.code">{{ item.name }}</u-radio>
					</u-radio-group>
					<view style="width:80rpx; display:inline-flex;flex-direction: row;align-items: center;">


						<input class="uni-input" @blur="wordCountChange" type="number"
							:disabled="wordQueryParams.wordType==1?true:false" style="border: 1px solid lightgray;"
							v-model="wordQueryParams.wordCount" placeholder="1-300" />
					</view>



					<text style="margin-left: 10rpx;">字/词语</text>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="出卷范围" label-width="150">
					<u-checkbox-group @change="wordScopeChange" v-model="wordScopeTemp" :width="radioCheckWidth"
						:wrap="radioCheckWrap">
						<u-checkbox v-model="item.checked" v-for="(item, index) in wordScopeList" :key="index"
							:name="item.code">{{ item.name }}</u-checkbox>
						<view style="display: inline-block;float: right;margin-right: 30rpx;"><u-button @click="btnNext"
								type="primary">下一步</u-button></view>
					</u-checkbox-group>

				</u-form-item>


			</u-form>

		</view>

		<view>
			<u-popup v-model="show" mode="top">
				<view style="width: auto;height: 750rpx; text-align: center;">
					<view style="margin-top: 10rpx;">
						<BaseInfoSet ref="BaseInfoSet" @cancelClickEvent="cancelEventHander" @okClickEvent="okClickEventHander"></BaseInfoSet>
					</view>
				</view>
			</u-popup>
		</view>

		<view><u-top-tips type="primary"  ref="uTips"></u-top-tips></view>
	</view>
</template>

<script>
	import LocalDataSource from '@/common/LocalDataSource'
	import BaseInfoSet from '@/pages/index/baseInfoSet'
	import classifyData from "@/common/classify.data.js";
	import * as CourseApi from '@/api/course/index'
	import * as WordApi from '@/api/word/index'
	import {
		checkLogin
	} from '@/core/app'
	export default {
		components: {
			BaseInfoSet
		},
		data() {
			return {
				labelPosition: 'left',
				tabbar: classifyData,
				statusBarHeight: 0,
				titleBarHeight: 0,
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				isLogin: false,
				userInfo: {},
				show: false,
				selectCourseAll: false,
				selectUnitAll: false,
				BaseInfoStr: '',
				wordScopeTemp: [1],

				queryParams: {
					versionCode: "",
					gradeCode: "",
					termCode: ""
				},
				wordQueryParams: {
					versionCode: "",
					gradeCode: "",
					termCode: "",
					wordType: 1,
					wordScope: 1,
					wordCourses: [],
					wordUnits: [],
					wordCount: 50
				},
				courseList: [],
				unitList: [],
				wordTypeList: [{
						code: 1,
						name: '所选全部',
						checked: true
					},
					{
						code: 2,
						name: '随机抽取',
						checked: false
					}
				],
				wordScopeList: [

					{
						code: 1,
						name: '写字表',
						checked: true
					},
					{
						code: 2,
						name: '词语表',
						checked: false
					},


				]
			}

		},
		onLoad() {
			const SystemInfo = wx.getSystemInfoSync();
			this.statusBarHeight = SystemInfo.statusBarHeight;
		},
		onReady() {
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
				uni.getMenuButtonBoundingClientRect().height;
			// 判断是否已登录
			this.onRefreshPage()
		},
		
		methods: {
			// 刷新页面
			onRefreshPage() {
				this.isLogin = checkLogin()
				if (this.isLogin == true) {
					this.setBaseInfoTitle(this.$store.getters.userInfo)
					this.queryParams.versionCode = this.$store.getters.userInfo.bookVersion
					this.queryParams.gradeCode = this.$store.getters.userInfo.grade
					this.queryParams.termCode = this.$store.getters.userInfo.term
				}

				this.getUnitAndCourseTitleList()

			},
			setBaseInfoTitle(obj) {
				let bookVersion = LocalDataSource.bookVersionDataSource.find(p => p.code == obj.bookVersion)
				let grade = LocalDataSource.gradeDataSource.find(p => p.code == obj.grade)
				let term = LocalDataSource.termDataSource.find(p => p.code == obj.term)
				this.BaseInfoStr = bookVersion.name + grade.name + term.name
			},
			setBaseInfo() {
				this.show = this.show == true ? false : true
				this.$refs.BaseInfoSet.loadPage()
			},
			getUnitAndCourseTitleList() {
				const app = this
				CourseApi.getUnitAndCourseTitleList(app.queryParams).then(res => {
					app.courseList = res.data.courseList
					app.unitList = res.data.unitList
					app.courseList.forEach((item, index) => {
						//item.checked = false
						app.$set(item, 'checked', false);
					})
					app.unitList.forEach((item, index) => {
						//item.checked = false
						app.$set(item, 'checked', false);
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getWordsList() {

				const app = this
				WordApi.getWordsList(app.wordQueryParams).then(res => {
					if (res.data.wordList.length == 0) {
						app.$refs.uTips.show({
							title: '没查询到满足条件的字词',
							type: 'success',
							duration: '2300'
						})

					} else {
						app.$store.commit('SET_PAGEDATALIST', res.data)
						this.$navTo('pages/paper/index')
					}
				}).catch(error => {

				})
			},
			courseChange(e) {},
			unitChange(e) {},
			wordCountChange(e) {
				this.wordQueryParams.wordCount = e.detail.value
			},
			courseAllChange(e) {
				this.courseList.map(item => {
					item.checked = e.value
				})
			},
			unitAllChange(e) {
				this.unitList.map(item => {
					item.checked = e.value
				})
			},
			wordScopeChange(e) {
				if (e.length == 0) {
					this.wordScopeTemp = []
				} else {
					this.wordScopeTemp = e
				}
				console.log(this.wordScopeTemp)

			},
			checkForm() {
				const app = this
				app.wordQueryParams.versionCode = app.queryParams.versionCode
				app.wordQueryParams.gradeCode = app.queryParams.gradeCode
				app.wordQueryParams.termCode = app.queryParams.termCode
				app.wordQueryParams.wordCourses = []
				app.wordQueryParams.wordUnits = []
				app.courseList.forEach((item, index) => {

					if (item.checked == true) {
						app.wordQueryParams.wordCourses.push(item.courseCode)
					}
				})

				app.unitList.forEach((item, index) => {
					if (item.checked == true) {
						app.wordQueryParams.wordUnits.push(item.unitCode)
					}
				})
				if (app.wordQueryParams.wordCourses.length == 0 && app.wordQueryParams.wordUnits.length == 0) {
					app.$refs.uTips.show({
						title: '请选择课文或单元',
						type: 'success',
						duration: '2300'
					})
					return false
				}


				if (app.wordQueryParams.wordCount <= 0 || app.wordQueryParams.wordCount > 300) {
					debugger
					app.$refs.uTips.show({
						title: app.wordQueryParams.wordCount,
						type: 'success',
						duration: '2300'
					})



					app.$refs.uTips.show({
						title: '随机抽取字词数1-300字',
						type: 'success',
						duration: '2300'
					})
					return false
				}

				if (app.wordScopeTemp.length == 0) {
					app.$refs.uTips.show({
						title: '请选择出卷范围',
						type: 'success',
						duration: '2300'
					})
					return false
				}
				if (this.wordScopeTemp.length == 2) {
					this.wordQueryParams.wordScope = 3
				} else {
					this.wordQueryParams.wordScope = this.wordScopeTemp[0]
				}
				return true


			},
			btnNext() {
				if (this.checkForm()) {
					this.getWordsList()
				}


			},
			goLastPage(){
				this.onNavigateBack()
			},
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			},

			getImg() {
				return Math.floor(Math.random() * 35);
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			cancelEventHander() {
				this.show = false
			},
			okClickEventHander(obj) {
				this.queryParams.versionCode = obj.bookVersion
				this.queryParams.gradeCode = obj.grade
				this.queryParams.termCode = obj.term
				this.setBaseInfoTitle(obj)
				this.getUnitAndCourseTitleList()
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox{
		display:inline-flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		font-size: 12;
		width: 100%;
		background-color: white;
		margin-top: 10rpx;   
	}
	
	.title-text {
		display: inline-block;
		vertical-align: center;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 5rpx;
		color: white;
		font-size: 35rpx;
		font-weight: normal;
		max-width: 670rpx;
	}
	// 页面头部
	.main-header {
		background-color: #fff;
		// background-image: url('/static/background/user-header.png');
		position:flex;
		width: 100%;
		height: 180rpx;
		background-size: 100% 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		// padding-top: 40rpx;
		color:white;
		padding-left: 5rpx;
	
		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
	}
	
	.u-wrap {
		height: 800rpx;
		display: flex;
		flex-direction: column;

	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
		margin-left: 10rpx;
		margin-right: 10px;
	}


	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 100rpx;
		height: 800rpx;
		margin-top: 10rpx;
	}

	.u-tab-item {
		height: 400rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;

		text {
			writing-mode: vertical-rl;
		}

	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 60rpx;
		left: 0;
		top: 170rpx;
	}


	.right-box {
		height: 800rpx;
		margin-top: 10rpx;
		background-color: white;
	}

	.page-view {
		padding-left: 10rpx;

	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}

	// 页面头部
	.main-header {
		background-color: #fff;
		// background-image: url('/static/background/user-header.png');
		position: relative;
		width: 100%;
		height: 80rpx;
		background-size: 100% 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		// padding-top: 40rpx;
		padding-left: 30rpx;


	}

	

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: black;
		margin-right: 10px;
	}

	.input-ui {
		border: 1upx solid #dadbde;
		padding: 12upx 18upx;
		border-radius: 8upx;
		font-size: 30upx;
		color: rgb(48, 49, 51);
	}

	.botton-ui {
		width: 100%;
		padding: 22upx 0;
		background: #3c9cff;
		color: #fff;
		text-align: center;
		border-radius: 8upx;
		font-size: 30upx;
	}
</style>